"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Progress } from "@/components/ui/progress"
import {
  Search,
  MapPin,
  Users,
  Star,
  MessageCircle,
  ArrowLeft,
  Network,
  TrendingUp,
  Target,
  Award,
  Building,
  Phone,
  Mail,
  Globe,
  BarChart3,
} from "lucide-react"

export default function FindChannelPage() {
  const router = useRouter()
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedType, setSelectedType] = useState("all")
  const [selectedIndustry, setSelectedIndustry] = useState("all")
  const [selectedRegion, setSelectedRegion] = useState("all")

  const channels = [
    {
      id: 1,
      name: "华东区域代理商联盟",
      type: "代理商网络",
      industry: "消费电子",
      region: "华东地区",
      description: "覆盖华东六省一市的消费电子产品代理商网络，拥有完善的线下渠道体系",
      logo: "/placeholder.svg?height=60&width=60",
      contact: {
        name: "张总",
        title: "联盟主席",
        phone: "+86 138-0013-8000",
        email: "zhang@channel-alliance.com",
        website: "www.channel-alliance.com",
      },
      stats: {
        coverage: "6省1市",
        stores: 1200,
        monthlyVolume: "5000万",
        rating: 4.8,
        cooperationRate: 85,
      },
      advantages: ["渠道覆盖广", "资金实力强", "服务体系完善"],
      requirements: ["品牌知名度", "产品质量保证", "合理利润空间"],
      tags: ["代理", "零售", "华东"],
      verified: true,
      responseTime: "24小时内",
    },
    {
      id: 2,
      name: "新零售连锁集团",
      type: "连锁零售",
      industry: "快消品",
      region: "全国",
      description: "全国性新零售连锁集团，线上线下融合，专注快消品和生活用品销售",
      logo: "/placeholder.svg?height=60&width=60",
      contact: {
        name: "李经理",
        title: "采购总监",
        phone: "+86 139-0013-9000",
        email: "li@newretail-group.com",
        website: "www.newretail-group.com",
      },
      stats: {
        coverage: "全国300城市",
        stores: 5000,
        monthlyVolume: "2亿",
        rating: 4.9,
        cooperationRate: 92,
      },
      advantages: ["全国布局", "数字化程度高", "供应链完善"],
      requirements: ["创新产品", "稳定供货", "数字化对接"],
      tags: ["连锁", "新零售", "全国"],
      verified: true,
      responseTime: "12小时内",
    },
    {
      id: 3,
      name: "电商平台服务商",
      type: "电商服务",
      industry: "跨行业",
      region: "线上全国",
      description: "专业电商平台运营服务商，提供店铺运营、营销推广、数据分析等全方位服务",
      logo: "/placeholder.svg?height=60&width=60",
      contact: {
        name: "王总",
        title: "业务总监",
        phone: "+86 137-0013-7000",
        email: "wang@ecommerce-service.com",
        website: "www.ecommerce-service.com",
      },
      stats: {
        coverage: "全网平台",
        stores: 800,
        monthlyVolume: "8000万",
        rating: 4.7,
        cooperationRate: 78,
      },
      advantages: ["平台资源丰富", "运营经验丰富", "数据驱动"],
      requirements: ["产品差异化", "配合度高", "长期合作"],
      tags: ["电商", "运营", "全网"],
      verified: false,
      responseTime: "48小时内",
    },
    {
      id: 4,
      name: "B2B批发平台",
      type: "批发平台",
      industry: "工业品",
      region: "华南地区",
      description: "华南地区最大的B2B工业品批发平台，服务制造业企业采购需求",
      logo: "/placeholder.svg?height=60&width=60",
      contact: {
        name: "陈总",
        title: "平台负责人",
        phone: "+86 135-0013-5000",
        email: "chen@b2b-platform.com",
        website: "www.b2b-platform.com",
      },
      stats: {
        coverage: "华南5省",
        stores: 2000,
        monthlyVolume: "1.2亿",
        rating: 4.6,
        cooperationRate: 73,
      },
      advantages: ["B2B专业", "制造业资源", "批量采购"],
      requirements: ["工业品质量", "批量供货", "技术支持"],
      tags: ["B2B", "工业品", "华南"],
      verified: true,
      responseTime: "36小时内",
    },
    {
      id: 5,
      name: "社区团购联盟",
      type: "社区团购",
      industry: "生鲜食品",
      region: "一二线城市",
      description: "覆盖一二线城市的社区团购联盟，专注生鲜食品和日用品配送",
      logo: "/placeholder.svg?height=60&width=60",
      contact: {
        name: "刘总",
        title: "联盟秘书长",
        phone: "+86 136-0013-6000",
        email: "liu@community-group.com",
        website: "www.community-group.com",
      },
      stats: {
        coverage: "50个城市",
        stores: 3000,
        monthlyVolume: "6000万",
        rating: 4.5,
        cooperationRate: 68,
      },
      advantages: ["社区渗透深", "配送效率高", "用户粘性强"],
      requirements: ["生鲜品质", "冷链配送", "价格优势"],
      tags: ["社区", "生鲜", "配送"],
      verified: true,
      responseTime: "24小时内",
    },
    {
      id: 6,
      name: "跨境电商服务商",
      type: "跨境电商",
      industry: "跨境贸易",
      region: "全球",
      description: "专业跨境电商服务商，提供海外仓储、物流、营销等一站式跨境服务",
      logo: "/placeholder.svg?height=60&width=60",
      contact: {
        name: "赵总",
        title: "国际业务总监",
        phone: "+86 134-0013-4000",
        email: "zhao@cross-border.com",
        website: "www.cross-border.com",
      },
      stats: {
        coverage: "30个国家",
        stores: 500,
        monthlyVolume: "3000万美元",
        rating: 4.8,
        cooperationRate: 82,
      },
      advantages: ["全球布局", "合规经验", "本土化服务"],
      requirements: ["出口资质", "产品认证", "英文支持"],
      tags: ["跨境", "全球", "出口"],
      verified: true,
      responseTime: "48小时内",
    },
  ]

  const filteredChannels = channels.filter((channel) => {
    const matchesSearch =
      channel.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      channel.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
      channel.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase()))

    const matchesType = selectedType === "all" || channel.type === selectedType
    const matchesIndustry = selectedIndustry === "all" || channel.industry === selectedIndustry
    const matchesRegion = selectedRegion === "all" || channel.region.includes(selectedRegion)

    return matchesSearch && matchesType && matchesIndustry && matchesRegion
  })

  const handleContactChannel = (channel: any) => {
    alert(`联系渠道：${channel.name}`)
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/30">
      {/* 顶部导航 */}
      <header className="bg-white/80 backdrop-blur-xl border-b border-slate-200/50 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <Button variant="ghost" size="sm" onClick={() => router.back()}>
                <ArrowLeft className="w-4 h-4 mr-2" />
                返回
              </Button>
              <div>
                <h1 className="text-xl font-bold text-slate-900">找渠道</h1>
                <p className="text-sm text-slate-600">对接销售渠道和合作伙伴</p>
              </div>
            </div>
            <Badge className="bg-pink-100 text-pink-700">{filteredChannels.length} 个渠道</Badge>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-6 py-8">
        {/* 搜索和筛选 */}
        <Card className="mb-8 bg-white/70 backdrop-blur-sm border-0">
          <CardContent className="p-6">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <div className="relative">
                <Search className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
                <Input
                  placeholder="搜索渠道名称、描述..."
                  className="pl-10"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
              <Select value={selectedType} onValueChange={setSelectedType}>
                <SelectTrigger>
                  <SelectValue placeholder="渠道类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有类型</SelectItem>
                  <SelectItem value="代理商网络">代理商网络</SelectItem>
                  <SelectItem value="连锁零售">连锁零售</SelectItem>
                  <SelectItem value="电商服务">电商服务</SelectItem>
                  <SelectItem value="批发平台">批发平台</SelectItem>
                  <SelectItem value="社区团购">社区团购</SelectItem>
                  <SelectItem value="跨境电商">跨境电商</SelectItem>
                </SelectContent>
              </Select>
              <Select value={selectedIndustry} onValueChange={setSelectedIndustry}>
                <SelectTrigger>
                  <SelectValue placeholder="行业领域" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有行业</SelectItem>
                  <SelectItem value="消费电子">消费电子</SelectItem>
                  <SelectItem value="快消品">快消品</SelectItem>
                  <SelectItem value="工业品">工业品</SelectItem>
                  <SelectItem value="生鲜食品">生鲜食品</SelectItem>
                  <SelectItem value="跨境贸易">跨境贸易</SelectItem>
                  <SelectItem value="跨行业">跨行业</SelectItem>
                </SelectContent>
              </Select>
              <Select value={selectedRegion} onValueChange={setSelectedRegion}>
                <SelectTrigger>
                  <SelectValue placeholder="覆盖区域" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有区域</SelectItem>
                  <SelectItem value="华东">华东地区</SelectItem>
                  <SelectItem value="华南">华南地区</SelectItem>
                  <SelectItem value="华北">华北地区</SelectItem>
                  <SelectItem value="全国">全国</SelectItem>
                  <SelectItem value="全球">全球</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </CardContent>
        </Card>

        {/* 渠道列表 */}
        <div className="space-y-6">
          {filteredChannels.map((channel) => (
            <Card
              key={channel.id}
              className="bg-white/70 backdrop-blur-sm border-0 hover:shadow-lg transition-all duration-200"
            >
              <CardContent className="p-6">
                <div className="flex items-start space-x-6">
                  <Avatar className="w-16 h-16">
                    <AvatarImage src={channel.logo || "/placeholder.svg"} alt={channel.name} />
                    <AvatarFallback>
                      <Building className="w-8 h-8" />
                    </AvatarFallback>
                  </Avatar>

                  <div className="flex-1">
                    <div className="flex items-center justify-between mb-3">
                      <div className="flex items-center space-x-3">
                        <h3 className="text-xl font-semibold text-slate-900">{channel.name}</h3>
                        {channel.verified && (
                          <Badge className="bg-green-100 text-green-700">
                            <Award className="w-3 h-3 mr-1" />
                            认证
                          </Badge>
                        )}
                        <Badge className="bg-blue-100 text-blue-700">{channel.type}</Badge>
                        <Badge variant="outline">{channel.industry}</Badge>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Star className="w-4 h-4 text-yellow-500" />
                        <span className="font-medium">{channel.stats.rating}</span>
                      </div>
                    </div>

                    <p className="text-slate-600 mb-4 line-clamp-2">{channel.description}</p>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
                      <div>
                        <h4 className="font-medium text-slate-900 mb-3">渠道数据</h4>
                        <div className="space-y-2">
                          <div className="flex items-center justify-between text-sm">
                            <span className="text-slate-600">覆盖范围</span>
                            <span className="font-medium">{channel.stats.coverage}</span>
                          </div>
                          <div className="flex items-center justify-between text-sm">
                            <span className="text-slate-600">门店数量</span>
                            <span className="font-medium">{channel.stats.stores}+</span>
                          </div>
                          <div className="flex items-center justify-between text-sm">
                            <span className="text-slate-600">月销售额</span>
                            <span className="font-medium">{channel.stats.monthlyVolume}</span>
                          </div>
                          <div className="flex items-center justify-between text-sm">
                            <span className="text-slate-600">合作成功率</span>
                            <div className="flex items-center space-x-2">
                              <Progress value={channel.stats.cooperationRate} className="w-16 h-2" />
                              <span className="font-medium">{channel.stats.cooperationRate}%</span>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div>
                        <h4 className="font-medium text-slate-900 mb-3">联系信息</h4>
                        <div className="space-y-2 text-sm">
                          <div className="flex items-center space-x-2">
                            <Users className="w-3 h-3 text-slate-400" />
                            <span>
                              {channel.contact.name} - {channel.contact.title}
                            </span>
                          </div>
                          <div className="flex items-center space-x-2">
                            <Phone className="w-3 h-3 text-slate-400" />
                            <span>{channel.contact.phone}</span>
                          </div>
                          <div className="flex items-center space-x-2">
                            <Mail className="w-3 h-3 text-slate-400" />
                            <span>{channel.contact.email}</span>
                          </div>
                          <div className="flex items-center space-x-2">
                            <Globe className="w-3 h-3 text-slate-400" />
                            <span>{channel.contact.website}</span>
                          </div>
                          <div className="flex items-center space-x-2">
                            <Target className="w-3 h-3 text-slate-400" />
                            <span>响应时间：{channel.responseTime}</span>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
                      <div>
                        <h4 className="font-medium text-slate-900 mb-2">渠道优势</h4>
                        <div className="space-y-1">
                          {channel.advantages.map((advantage, index) => (
                            <div key={index} className="flex items-center space-x-2 text-sm text-slate-600">
                              <TrendingUp className="w-3 h-3 text-green-500" />
                              <span>{advantage}</span>
                            </div>
                          ))}
                        </div>
                      </div>

                      <div>
                        <h4 className="font-medium text-slate-900 mb-2">合作要求</h4>
                        <div className="space-y-1">
                          {channel.requirements.map((requirement, index) => (
                            <div key={index} className="flex items-center space-x-2 text-sm text-slate-600">
                              <BarChart3 className="w-3 h-3 text-blue-500" />
                              <span>{requirement}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>

                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-4">
                        <div className="flex items-center space-x-1">
                          <MapPin className="w-3 h-3 text-slate-400" />
                          <span className="text-sm text-slate-600">{channel.region}</span>
                        </div>
                        <div className="flex flex-wrap gap-1">
                          {channel.tags.map((tag, index) => (
                            <Badge key={index} variant="outline" className="text-xs">
                              {tag}
                            </Badge>
                          ))}
                        </div>
                      </div>

                      <div className="flex space-x-2">
                        <Button variant="outline" size="sm">
                          详情
                        </Button>
                        <Button size="sm" onClick={() => handleContactChannel(channel)}>
                          <MessageCircle className="w-3 h-3 mr-1" />
                          联系
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        {filteredChannels.length === 0 && (
          <div className="text-center py-12">
            <Network className="w-16 h-16 text-slate-300 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-slate-900 mb-2">暂无匹配的渠道</h3>
            <p className="text-slate-600">尝试调整搜索条件或筛选器</p>
          </div>
        )}
      </main>
    </div>
  )
}
